<template>
    <div class="liquidCon">
      <div class="liquidBorderImgAnim">
      </div>
      <div class="liquidBorderImg">
          <div id="liquidfillChart" style="min-width:750px;min-height:200px;height:750px;color:white;">
          </div>
        </div>
    </div>
</template>
<script>
import echarts from "echarts";
require("echarts-liquidfill");
export default {
  props: {
    chartStyle: {
      type: String, // 自定义图标宽高
      default: () => {
        return "";
      }
    },
    value: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    value(res) {
      this.setChart(res);
    }
  },
  data() {
    return {
      myChart: null,
      setInterTime: null,
      timeOut: null
    };
  },
  mounted() {
    // this.setChart();
  },
  beforeDestroy() {
    clearInterval(this.setInterTime);
    clearTimeout(this.timeOut);
  },
  methods: {
    setChart(res) {
      var self = this;
      var option = {
        title: {
          text: ""
        },
        series: [
          {
            type: "liquidFill",
            name: "总库位: " + res.total,
            color: [
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(240,189,38,1)"
                },
                {
                  offset: 1,
                  color: "rgba(240,189,38, 0.6)"
                }
              ]),
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(240,189,38,0.6)	"
                },
                {
                  offset: 1,
                  color: "rgba(240,189,38, 0.3)	"
                }
              ])
            ],
            data: [
              {
                name: "库存使用率",
                value: res.list[0].value / res.total
              },
              {
                value: res.list[0].value / res.total,
                phase: Math.PI
              }
            ],
            label: {
              normal: {
                position: ["50%", "40%"],
                color: "#F0BD26",
                insideColor: "black",
                fontFamily: "DIN Condensed Bold",
                fontSize: 94,
                lineHeight: 50,
                formatter: function(params) {
                  return (
                    "\n{a| 总库位:}{b| " +
                    Number(res.total).toLocaleString() +
                    "} \n {c| 库存使用率} \n\n\n" + (res.list[0].value / res.total * 100).toFixed(2) + "%"
                  )
                },
                rich: {
                  a: {
                    color: "#F0BD26",
                    fontSize: 24
                  },
                  b: {
                    color: "#F0BD26",
                    fontSize: 26,
                    fontFamily: "DIN Condensed Bold"
                  },
                  c: {
                    color: "#F0BD26",
                    fontSize: 38,
                    fontFamily: "DIN Condensed Bold"
                  }
                }
              }
              
            },
            backgroundStyle: {
              color: "rgba(0,0,0,0.5)"
            },
            outline: {
              show: false
            },
            phase: 0,
            period: 4000,
            waveLength: "100%",
            animationDurationUpdate: 2000
          }
        ]
      };
      this.timeOut = setTimeout(function() {
        self.myChart = echarts.init(
          document.getElementById("liquidfillChart"),
          null,
          {
            devicePixelRatio: 2
          }
        );
        self.myChart.setOption(option);
      }, 0);
    }
  }
};
</script>

<style lang="scss" scoped>
.liquidCon {
  display: flex;
  position: absolute;
  left: 20px;
  right: 0;
  top: 0;
  bottom: 0;
}
.liquidBorderImgAnim {
  position: absolute;
  top: 0;
  width: 750px;
  height: 750px;
  right: 0;
  left: 0;
  bottom: 0;
  background-image: url("../../../static/img/cyy/liquidBorderAnim.png");
  background-size: 56% 56%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin: auto;
  animation: turnOn 4s 2s ease infinite alternate;
}
@keyframes turnOn {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(20deg);
  }
}

.liquidBorderImg {
  position: relative;
  margin: auto;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    background-image: url("../../../static/img/cyy/liquidBorder.png");
    background-size: 50% 50%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }
}
</style>